<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MarkDown Preview Plus options</title>
<link href="bootstrap.css" rel="stylesheet">
<script src="js/jquery.js"></script>
</head>
<body>

<div class="container">
    <h1>MarkDown Preview Plus Options</h1>

    <div id="msg"></div>

    <section>
        <div class="page-header">
            <h2>Miscs</h2>
        </div>
        <div class="form-group checkbox-inline">
        <label class="checkbox"><input type="checkbox" id="katex">KaTeX support inline(<code>$math$ or \(math\)</code>) and line(<code>$$math$$ or \[math\]</code></label>
        <label class="checkbox"><input type="checkbox" id="html"> Enable HTML content <strong>Note:</strong> Take care for XSS attack if you enable this option</label>
        <label class="checkbox"><input type="checkbox" id="auto-reload"> Enable auto-reload</label>
        <label class="checkbox"><input type="checkbox" id="toc"> Enable Table Of Content</label>
        </div>
        <p>
        Reload Frequency
        <select id="reload-freq" class="span2">
            <option value="3">3 seconds</option>
            <option value="1">1 second</option>
            <option value="2">2 seconds</option>
            <option value="4">4 seconds</option>
            <option value="5">5 seconds</option>
        </select>
        </p>
    </section>

    <section>
        <div class="page-header">
            <h2>Themes</h2>
        </div>

        <h4>Default CSS</h4>
        <p>This CSS applies to Live Preview.</p>
        <div>
            <select id="theme" class="span3">
                <optgroup label="Default themes">
                <option>Clearness</option>
                <option>ClearnessDark</option>
                <option>Github</option>
                <option>GithubLeft</option>
                <option>TopMarks</option>
                <option>YetAnotherGithub</option>
                </optgroup>
            </select>

            <button id="btn-remove-css" class="btn btn-sm btn-primary" type="button">Remove CSS</button>
        </div>

        <h4>Or add a customize CSS</h4>
        <div class="form-group">
            <input type="file" id="css-file">
            <p class="help-block">
            <button id="btn-add-css" class="btn btn-sm btn-primary" type="button">Add CSS</button>
            </p>
        </div>
    </section>

    <section>
        <div class="page-header">
        <h2>Supported file extensions</h2>
        </div>
        <p class="cont-exts">
        <label class="checkbox-inline"><input type="checkbox" value="md" checked="checked" class="span1">md</label>
        <label class="checkbox-inline"><input type="checkbox" value="text" checked="checked">text</label>
        <label class="checkbox-inline"><input type="checkbox" value="markdown" checked="checked">markdown</label>
        <label class="checkbox-inline"><input type="checkbox" value="mdown" checked="checked">mdown</label>
        <label class="checkbox-inline"><input type="checkbox" value="txt" checked="checked">txt</label>
        <label class="checkbox-inline"><input type="checkbox" value="mkd" checked="checked">mkd</label>
        <label class="checkbox-inline"><input type="checkbox" value="rst" checked="checked">rst</label>
		<label class="checkbox-inline"><input type="checkbox" value="rmd" checked="checked">rmd</label>
        </p>
    </section>
</div>

<script src="js/options.js"></script>
</body>
</html>
